<%--
  Created by IntelliJ IDEA.
  User: snow
  Date: 2016/6/14
  Time: 11:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/commons/taglibs.jsp"%>
<!-- header begin-->
<header class="main-header">
  <!-- Logo -->
  <a href="index" class="logo">
    <!-- mini logo for sidebar mini 50x50 pixels -->
    <span class="logo-mini"><b>S</b>tream</span>
    <!-- logo for regular state and mobile devices -->
    <span class="logo-lg"><b>Stream</b></span>
  </a>

  <!-- Header Navbar -->
  <nav class="navbar navbar-static-top" role="navigation">
    <!-- Sidebar toggle button-->
    <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
      <span class="sr-only">Toggle navigation</span>
    </a>
    <!-- Navbar Right Menu -->
    <div class="navbar-custom-menu">
      <ul class="nav navbar-nav">

        <%--<li class="dropdown notifications-menu">--%>
          <%--<!-- Menu toggle button -->--%>
          <%--<a href="#" class="dropdown-toggle" data-toggle="dropdown">--%>
            <%--<i class="fa fa-user-md"></i><!-- fa fa-bell-o -->--%>
            <%--<span class="label label-primary">quick menu</span><!--label label-warning-->--%>
          <%--</a>--%>
          <%--<ul class="dropdown-menu">--%>
            <%--<li class="header">用户快捷菜单设置</li>--%>
            <%--<li>--%>
              <%--<!-- Inner Menu: contains the notifications -->--%>
              <%--<ul class="menu">--%>
                <%--<li><!-- start notification -->--%>
                  <%--<a href="#">--%>
                    <%--<i class="fa fa-users text-aqua"></i> 5 new members joined today--%>
                  <%--</a>--%>
                <%--</li>--%>
                <%--<!-- end notification -->--%>
              <%--</ul>--%>
            <%--</li>--%>
            <%--<li class="footer"><a href="#" onclick="">添加</a></li>--%>
          <%--</ul>--%>
        <%--</li>--%>

          <!-- System Time -->

          <!--skin-->
          <li >
            <!-- Menu toggle button -->
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-th-large"></i>
            </a>
            <ul class="dropdown-menu" style="width:150px">
              <li style="padding: 1%" id="blueSkin">
                  <div style="height: 40px;width: 70%;background: #3c8dbc;margin:0 auto;text-align: center;line-height:40px;color: #FFFFFF;cursor: pointer">简约深蓝</div>
              </li>
              <li style="padding: 1%" id="blackSkin">
                <div style="height: 40px;width: 70%;background: #333;margin:0 auto;text-align: center;line-height:40px;color: #FFFFFF;cursor: pointer">经典黑</div>
              </li>
            </ul>
          </li>


        <!-- Messages: style can be found in dropdown.less-->
       <!-- <li class="dropdown messages-menu">
          <!-- Menu toggle button -->
        <!--  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <i class="fa fa-envelope-o"></i>
            <span class="label label-success">4</span>
          </a>
          <ul class="dropdown-menu">
            <li class="header">您有4条消息</li>
            <li>
              <!-- inner menu: contains the messages -->
             <!-- <ul class="menu">
                <li><!-- start message -->
                  <%--<a href="#">--%>
                    <%--<div class="pull-left">--%>
                      <%--<!-- User Image -->--%>
                      <%--<img src="${basePath}/statics/modules/sys/index/img/user2-160x160.jpg" class="img-circle" alt="User Image">--%>
                    <%--</div>--%>
                    <%--<!-- Message title and timestamp -->--%>
                    <%--<h4>--%>
                      <%--Support Team--%>
                      <%--<small><i class="fa fa-clock-o"></i> 5 mins</small>--%>
                    <%--</h4>--%>
                    <%--<!-- The message -->--%>
                    <%--<p>Why not buy a new awesome theme?</p>--%>
                  <%--</a>--%>
                <%--</li>--%>
                <%--<!-- end message -->--%>
              <%--</ul>--%>
              <%--<!-- /.menu -->--%>
            <%--</li>--%>
            <%--<li class="footer"><a href="#">See All Messages</a></li>--%>
          <%--</ul>--%>
        <%--</li>--%>
        <%--<!-- /.messages-menu -->--%>


        <%--<!-- Notifications Menu -->--%>
        <%--<li class="dropdown notifications-menu">--%>
          <%--<!-- Menu toggle button -->--%>
          <%--<a href="#" class="dropdown-toggle" data-toggle="dropdown">--%>
            <%--<i class="fa fa-bell-o"></i>--%>
            <%--<span class="label label-warning">10</span>--%>
          <%--</a>--%>
          <%--<ul class="dropdown-menu">--%>
            <%--<li class="header">You have 10 notifications</li>--%>
            <%--<li>--%>
              <%--<!-- Inner Menu: contains the notifications -->--%>
              <%--<ul class="menu">--%>
                <%--<li><!-- start notification -->--%>
                  <%--<a href="#">--%>
                    <%--<i class="fa fa-users text-aqua"></i> 5 new members joined today--%>
                  <%--</a>--%>
                <%--</li>--%>
                <%--<!-- end notification -->--%>
              <%--</ul>--%>
            <%--</li>--%>
            <%--<li class="footer"><a href="#">View all</a></li>--%>
          <%--</ul>--%>
        <%--</li>--%>
        <%--<!-- Tasks Menu -->--%>
        <%--<li class="dropdown tasks-menu">--%>
          <%--<!-- Menu Toggle Button -->--%>
          <%--<a href="#" class="dropdown-toggle" data-toggle="dropdown">--%>
            <%--<i class="fa fa-flag-o"></i>--%>
            <%--<span class="label label-danger">9</span>--%>
          <%--</a>--%>
          <%--<ul class="dropdown-menu">--%>
            <%--<li class="header">you have ...</li>--%>
            <%--<li>--%>
              <%--<!-- Inner menu: contains the tasks -->--%>
              <%--<ul class="menu">--%>
                <%--<li><!-- Task item -->--%>
                  <%--<a href="#">--%>
                    <%--<!-- Task title and progress text -->--%>
                    <%--<h3>--%>
                      <%--Design some buttons--%>
                      <%--<small class="pull-right">20%</small>--%>
                    <%--</h3>--%>
                    <%--<!-- The progress bar -->--%>
                    <%--<div class="progress xs">--%>
                      <%--<!-- Change the css width attribute to simulate progress -->--%>
                      <%--<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">--%>
                        <%--<span class="sr-only">20% Complete</span>--%>
                      <%--</div>--%>
                    <%--</div>--%>
                  <%--</a>--%>
                <%--</li>--%>
                <%--<!-- end task item -->--%>
              <%--</ul>--%>
            <%--</li>--%>
            <%--<li class="footer">--%>
              <%--<a href="#">View all tasks</a>--%>
            <%--</li>--%>
          <%--</ul>--%>
        <%--</li>--%>
        <!-- User Account Menu -->
        <li class="dropdown user user-menu">
          <!-- Menu Toggle Button -->
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <!-- The user image in the navbar-->
            <img src="${basePath}/statics/modules/sys/index/img/default-avator.jpg" class="user-image" alt="User Image">
            <!-- hidden-xs hides the username on small devices so only the image appears. -->
            <span class="hidden-xs">${loginUser.username}</span>
          </a>
          <ul class="dropdown-menu">
            <!-- The user image in the menu -->
            <li class="user-header">
              <img src="${basePath}/statics/modules/sys/index/img/default-avator.jpg" class="img-circle" alt="User Image">

              <p>
                   ${loginUser.username}
                <small>Member since Nov. 2012</small>
              </p>
            </li>
            <!-- Menu Footer-->
            <li class="user-footer">
              <div class="pull-left">
                <a href="#" class="btn btn-default btn-flat">Profile</a>
              </div>
              <div class="pull-right">
                <a href="${basePath}/admin/logout" class="btn btn-default btn-flat">退出登录</a>
              </div>
            </li>
          </ul>
        </li>
        <!-- Control Sidebar Toggle Button -->
        <li>
          <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
        </li>
      </ul>
    </div>
  </nav>
</header>

